<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j">
    <body>
        <ui:composition template="/common/templates/common.xhtml">
            <ui:param name="titulo" value="Carrito de Compras" />

            <ui:define name="body">
                <rich:messages passedLabel="Data is allowed to be stored." layout="list">
                    <f:facet name="header">
                        <h:outputText value="Entered Data Status:"></h:outputText>
                    </f:facet>
                    <f:facet name="infoMarker">
                        <h:graphicImage  value="/img/passed_.gif" />
                    </f:facet>
                    <f:facet name="errorMarker">
                        <h:graphicImage value="/img/error_.gif" />
                    </f:facet>
                </rich:messages>
                <h:form>
                    <a4j:region>
                        <rich:dataTable value="#{SessionWeb.carritoCompras}"
                        var="carrito" id="tabla" rows="3" rendered="#{AgregarCarritoBackingBean.validoUsuario}">
                            <f:facet name="header">
                                <h:outputText value="Lista de productos en el carrito de compras"/>
                            </f:facet>
                            <rich:column>
                                <f:facet name="header">
                                    <h:outputText value="Referencia" />
                                </f:facet>
                                <h:outputText value="#{carrito.mueble.referencia}" id="referencia" />
                            </rich:column>
                            <rich:column>
                                <f:facet name="header">
                                    <h:outputText value="Nombre" />
                                </f:facet>
                                <h:outputText value="#{carrito.mueble.nombre}" id="nombre" />
                            </rich:column>
                            <rich:column>
                                <f:facet name="header">
                                    <h:outputText value="Material" />
                                </f:facet>
                                <h:outputText value="#{carrito.mueble.material}" id="material" />
                            </rich:column>
                            <rich:column>
                                <f:facet name="header">
                                    <h:outputText value="Foto" />
                                </f:facet>
                                <h:graphicImage value="#{carrito.mueble.foto}" style="border:0"/>
                            </rich:column>
                            <rich:column>
                                <f:facet name="header">
                                    <h:outputText value="Cantidad" />
                                </f:facet>
                                <h:outputText value="#{carrito.cantidad}" id="cantidad" />
                            </rich:column>
                            <rich:column>
                                <f:facet name="header">
                                    <h:outputText value="Precio" />
                                </f:facet>
                                <h:outputText value="#{carrito.precio}" id="precio">
                                    <f:convertNumber currencyCode="COP" currencySymbol="$" maxFractionDigits="0" type="currency">
                                    </f:convertNumber>
                                </h:outputText>
                            </rich:column>
                            <f:facet name="footer">
                                <rich:datascroller id="dataScroll">
                                </rich:datascroller>
                            </f:facet>
                        </rich:dataTable>
                        <h:commandButton id="b_continuar" value="Continuar Compra"
                            action="#{AgregarCarritoBackingBean.continuarCompra}"/>

                        <a4j:commandButton id="b_comprar" value="Efectuar Compra" ajaxSingle="true"
                        oncomplete="javascript:Richfaces.showModalPanel('panelEfecutarCompra',{width:200, top:250})"
                        rendered="#{AgregarCarritoBackingBean.puedeEfectuarCompra}"/>

                    </a4j:region>
                    <h:panelGrid columns="2">
                        <h:outputLabel value="Subtotal:" id="l_subtotal" for="t_subtotal"/>
                        <h:outputText value="#{SessionWeb.subtotalCompra}" id="t_subtotal"
                            rendered="#{AgregarCarritoBackingBean.puedeEfectuarCompra}">
                            <f:convertNumber currencyCode="COP" currencySymbol="$" maxFractionDigits="0" type="currency">
                            </f:convertNumber>
                        </h:outputText>
                    </h:panelGrid>
                </h:form>

                <rich:modalPanel id="panelEfecutarCompra" autosized="true">
                    <f:facet name="header">
                        <h:outputText value="Compra a efecutar" />
                    </f:facet>
                    <f:facet name="controls">
                        <h:panelGroup>
                            <h:graphicImage value="/img/close.gif"
                                id="hidelink" styleClass="hidelink"/>
                            <rich:componentControl for="panelEfecutarCompra" attachTo="hidelink"
                                operation="hide" event="onclick" />
                        </h:panelGroup>
                    </f:facet>
                    <h:form>
                        <a4j:keepAlive beanName="AgregarCarritoBackingBean"/>
                        <h:panelGrid columns="1">
                            <a4j:region>
                                <rich:dataTable value="#{SessionWeb.categoriasValor}"
                                    var="categoria" id="t_categoria" rendered="#{AgregarCarritoBackingBean.puedeEfectuarCompra}">
                                    <f:facet name="header">
                                        <h:outputText value="Items a pagar"/>
                                    </f:facet>
                                    <rich:column>
                                        <f:facet name="header">
                                            <h:outputText value="Categoría" />
                                        </f:facet>
                                        <h:outputText value="#{categoria.nombreCategoria}" id="nombreCategoria" />
                                    </rich:column>
                                    <rich:column>
                                        <f:facet name="header">
                                            <h:outputText value="Valor" />
                                        </f:facet>
                                        <h:outputText value="#{categoria.valor}" id="valorCategoria"  title="#{categoria.descripcion}">
                                            <f:convertNumber currencyCode="COP" currencySymbol="$" maxFractionDigits="0" type="currency">
                                            </f:convertNumber>
                                        </h:outputText>
                                    </rich:column>
                                    <f:facet name="footer">
                                        <h:outputText value="#{SessionWeb.valorTotalCompra}" id="valorTotal">
                                            <f:convertNumber currencyCode="COP" currencySymbol="$" maxFractionDigits="0" type="currency">
                                            </f:convertNumber>
                                        </h:outputText>
                                    </f:facet>
                                </rich:dataTable>
                                <a4j:commandButton value="Pagar"
                                    action="#{AgregarCarritoBackingBean.efectuarCompra}"/>
                            </a4j:region>
                        </h:panelGrid>
                    </h:form>
                </rich:modalPanel>
            </ui:define>
        </ui:composition>
    </body>
</html>